<template>
	<view class="video-container">
		<video :src="previewVideoPath" autoplay="true" controls class="preview-video" @play="onPlay" @pause="onPause"></video>
		<view class="next-step-button" @click="goToNextStep">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				previewVideoPath: '',
			}
		},
		onLoad(query) {
			// 获取传递过来的视频路径
			const videoPath = decodeURIComponent(query.videoPath);
			console.log('接收到的视频路径：', videoPath);
			// 可以将视频路径保存到 data 中，用于后续操作
			this.previewVideoPath = videoPath;
		},
		methods: {
			onPlay() {
				console.log('视频播放');
			},
			onPause() {
				console.log('视频暂停');
			},
			goToNextStep() {
				// 在这里定义下一步的逻辑
				uni.navigateTo({
					url: `/pages/commponent/release_case?videoPath=${encodeURIComponent(this.previewVideoPath)}&type=Video`
				});
			}
		}
	}
</script>

<style>
	.video-container {
		width: 100%;
		height: 100vh;
		/* 视口高度 */
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		/* 背景颜色，避免视频加载时空白 */
		position: relative; /* 添加相对定位 */
	}

	.preview-video {
		width: 100%;
		height: 100%;
	}

	.next-step-button {
		position: absolute; /* 绝对定位 */
		top: 20px; /* 距离顶部20px */
		right: 20px; /* 距离右侧20px */
		padding: 10px 20px; /* 按钮内边距 */
		background-color: #00af6f; /* 按钮背景颜色 */
		color: #fff; /* 按钮文字颜色 */
		border-radius: 5px; /* 按钮圆角 */
		font-size: 16px; /* 按钮文字大小 */
		text-align: center; /* 文字居中 */
		cursor: pointer; /* 鼠标悬停时显示手型 */
	}
</style>